<template>
  <div class="min-h-screen bg-gray-50 flex flex-col items-center justify-center">
    <div class="text-center p-8">
      <div class="w-24 h-24 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
        <i class="fa fa-book text-4xl text-orange-500"></i>
      </div>
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-800 mb-4">欢迎光临</h1>
      <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 mb-8 max-w-2xl mx-auto">
        探索我们丰富的图书世界，找到您心仪的好书
      </p>
      <div class="flex flex-wrap justify-center gap-4">
        <el-button type="primary" size="large" @click="goToHome">
          开始浏览
        </el-button>
        <el-button type="info" size="large" @click="goToCategory">
          浏览分类
        </el-button>
      </div>
    </div>
    <div class="mt-12 max-w-4xl w-full">
      <el-carousel height="300px" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <div class="flex items-center justify-center h-full bg-white p-6 rounded-lg shadow-md">
            <img :src="item.image" alt="carousel" class="h-48 object-cover rounded">
            <div class="ml-6 text-left">
              <h3 class="text-xl font-bold text-gray-800 mb-2">{{ item.title }}</h3>
              <p class="text-gray-600 mb-4">{{ item.description }}</p>
              <el-button type="primary" size="small">了解更多</el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 轮播图数据
const carouselItems = ref([
  {
    image: 'https://picsum.photos/400/300?random=11',
    title: '新书推荐',
    description: '每周更新一批精选好书，满足您的阅读需求'
  },
  {
    image: 'https://picsum.photos/400/300?random=12',
    title: '畅销排行',
    description: '查看本周最受欢迎的书籍排行榜'
  },
  {
    image: 'https://picsum.photos/400/300?random=13',
    title: '限时折扣',
    description: '精选好书限时折扣，先到先得'
  }
])

// 获取路由实例
const router = useRouter()

// 导航方法
const goToHome = () => {
  router.push('/')
}

const goToCategory = () => {
  router.push('/category/literature')
}
</script>

<style scoped>

</style>